<template>
  <view class="view-container">
    <view class="input-item">
      <text class="text-span">收货人：</text>
      <input class="text-input" v-model="consignee"/>
    </view>
    <view class="input-item">
      <text class="text-span">性别：</text>
      <picker class="picker text-input" mode="selector" :range="['男', '女']" @change="changeSex">
        <text>{{ sex === 0 ? '女' : '男' }}</text>
      </picker>
    </view>
    <view class="input-item">
      <text class="text-span">手机号码：</text>
      <input class="text-input" v-model="phone" type="number"/>
    </view>
    <!--    <view class="input-item">-->
    <!--      <view class="text-span">地区选择</view>-->
    <!--      <picker @change="bindPickerChange" :value="index" :range="array">-->
    <!--        <view class="uni-input">{{ array[index] }}</view>-->
    <!--      </picker>-->
    <!--    </view>-->
    <view class="input-item">
      <view class="text-span">所在地区:</view>
      <CityPicker class="text-input" @update:modelValue="changeLo">
        <view>{{ provinceName + cityName + districtName }}</view>
        <view v-show="provinceName===''">省市区县、乡镇等</view>
      </CityPicker>
    </view>

    <view>
      <text class="text-span">详细地址：</text>
      <textarea class="text-input1" v-model="detail"></textarea>
    </view>
    <view class="input-item">
      <text class="text-span">标签：</text>
      <input class="text-input" v-model="label"/>
    </view>
    <view class="switch-container input-item">
      <text class="switch-label text-span">设为默认：</text>
      <switch :checked="isDefaultFlag" @change="switchChange"/>
    </view>
    <button class="save-button" @tap="saveAddress">保存</button>
  </view>
</template>

<script>
import citys from './regions.json';
import CityPicker
  from "@/components/taoeer-city-select/components/taoeer-city-select/taoeer-city-select.vue";
import {getTokenId} from "@/common/auth";
import {addAddressApi, updateAddressApi} from "@/network/api";

export default {
  data() {
    return {
      consignee: "",//收货人
      sex: 0,
      phone: "",
      provinceName: "", // 保存选择的省份
      cityName: "", // 保存选择的城市
      districtName: "", // 保存选择的区县
      detail: "",
      label: "",//标签
      isDefault: 0,
      isDefaultFlag: false,
      userId: getTokenId(),
      id: null
    };
  },
  components: {
    CityPicker
  },
  onLoad(e) {
    if (e.item !== 'null') {
      console.log(JSON.parse(e.item))
      Object.assign(this.$data, JSON.parse(e.item))
      console.log(this.isDefault)
      if (this.isDefault === 1) {
        this.isDefaultFlag = true
      }
      console.log(this.isDefaultFlag)
    }

  }
  ,
  methods: {
    changeSex(e) {
      this.sex = e.detail.value;
    },
    switchChange(e) {
      console.log(e.detail.value)
      console.log(this.isDefault)
      if (e.detail.value) {
        this.isDefault = 1
      } else {
        this.isDefault = 0
      }
    },
    changeLo(e) {
      console.log(e)
      this.provinceName = e[0] // 保存选择的省份
      this.cityName = e[1] // 保存选择的城市
      this.districtName = e[2] // 保存选择的区县
    }
    ,
    saveAddress() {
      // 在这里添加保存地址的逻辑，可以使用uni的API或发送请求到后端
      console.log("保存地址", this.$data);
      if (this.id === null) {
        addAddressApi(this.$data).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: '编辑成功',
              icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
              duration: 2000    //持续时间为 2秒
            })
          }
        })
      } else {
        updateAddressApi(this.$data).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: '编辑成功',
              icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
              duration: 2000    //持续时间为 2秒
            })
          }
        })
      }

    },


  }
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f4f4f4;
}

.view-container {
  padding: 20px;
}

.input-item {
  display: flex;
  position: relative;
}

.text-span {
  display: flex;
  position: relative;
  width: 30%;
}

.text-input {
  width: 65%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  height: 35rpx;
}


.text-input1 {
  width: 94%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.picker-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.picker-label {
  display: flex;
  position: relative;
  width: 30%;
}

.picker {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  background-color: #fff;
  height: 35rpx;
}

.switch-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.switch-label {
  flex: 1;
  font-size: 16px;
}


.save-button {
  background-color: #FA877D;
  border-radius: 50rpx;
  width: 100%;
  height: 84upx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

</style>

